<template>
	<view class="Com_city">
		<uni-popup ref="Compopup" type="bottom" @change="Onchange">
			<view class="picker_bos">
				<viwe class="picker_bos--title">
					<view class="title_qx" @click="Oncancel">取消</view>
					<view class="title_xz">选择地址</view>
					<view class="title_qd" @click="bindPickerChange">确定</view>
				</viwe>
				<view class="picker_box" v-if="pickerif">
					<picker-view :value="index" :indicator-style="indicatorStyle" @change="Onchangecity" class="picker-view">
						<picker-view-column>
							<view class="picker_item" v-for="(item,index) in arrayList[0]" :key="index">{{item.title}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker_item" v-for="(item,index) in arrayList[1]" :key="index">{{item.title}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="picker_item" v-for="(item,index) in arrayList[2]" :key="index">{{item.title}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>


		</uni-popup>
		<!-- 		<picker mode=multiSelector range-key="title" @cancel="Oncancel" @change="bindPickerChange" @columnchange="Onchangecity" :value="index"
		 :range="arrayList">
			<slot></slot>
		</picker> -->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		props: {
			countycode: {
				type: String,
				default: '420102'
			},
		},
		data() {
			return {
				pickerif: false, //异步
				indicatorStyle: `height: 100rpx;`,
				visible: true,
				util: {}, //地址
				arrayList: [], //地址
				index: [0, 0, 0], //地址下标
				arrayLista: []
			};
		},
		mounted() {
			var util = require('../common/js/area.js');
			this.util = util.default.areaList
			//修改地址格式
			this.Onutil()
		},
		methods: {
			//修改地址格式
			Onutil() {
				let utilList = [
					[],
					[],
					[]
				]
				let countycode = this.countycode
				let provinceindex = 0
				let cityindex = 0
				let countyindex = 0
				for (let key in this.util.province_list) {
					let a = {
						title: this.util.province_list[key],
						code: key
					}
					utilList[0].push(a)
					if (countycode.substring(0, 2) == key.substring(0, 2)) {
						this.index[0] = provinceindex
					}
					provinceindex++
				}
				for (let key in this.util.city_list) {
					if (countycode.substring(0, 2) == key.substring(0, 2)) {
						let a = {
							title: this.util.city_list[key],
							code: key
						}
						utilList[1].push(a)
						if (countycode.substring(0, 4) == key.substring(0, 4)) {
							this.index[1] = cityindex
						}
						cityindex++
					}
				}
				for (let key in this.util.county_list) {
					if (countycode.substring(0, 4) == key.substring(0, 4)) {
						let a = {
							title: this.util.county_list[key],
							code: key
						}
						utilList[2].push(a)
						if (countycode == key) {
							this.index[2] = countyindex
						}
						countyindex++
					}
				}
				console.log(utilList,'查看')
				this.arrayList = utilList
				this.pickerif = true
			},
			//切换下拉省市区
			Onchangecity(e) {

				let detail = e.detail
				if ((this.index[0] != detail.value[0]) && this.index[1] == detail.value[1] && this.index[2] == detail.value[2]) {
					detail.column = 0
				}
				if ((this.index[1] != detail.value[1]) && this.index[0] == detail.value[0] && this.index[2] == detail.value[2]) {
					detail.column = 1
				}
				if ((this.index[2] != detail.value[2]) && this.index[0] == detail.value[0] && this.index[1] == detail.value[1]) {
					detail.column = 2
				}
				let provincecode = ''
				let citycode = ''
				//如果是切换省
				if (detail.column == 0) {
					provincecode = this.arrayList[0][detail.value[0]].code
					this.arrayList[1] = []
					this.arrayList[2] = []
					this.index[0] = detail.value[0]
					this.index[1] = 0
					this.index[2] = 0
					for (let key in this.util.city_list) {
						if (provincecode.substring(0, 2) == key.substring(0, 2)) {
							let a = {
								title: this.util.city_list[key],
								code: key
							}
							this.arrayList[1].push(a)
						}
					}
					citycode = this.arrayList[1][0].code
					for (let key in this.util.county_list) {
						if (citycode.substring(0, 4) == key.substring(0, 4)) {
							let a = {
								title: this.util.county_list[key],
								code: key
							}
							this.arrayList[2].push(a)
						}
					}
				}

				//如果是切换市
				if (detail.column == 1) {
					this.index[1] = detail.value[1]
					this.index[2] = 0
					this.arrayList[2] = []
					citycode = this.arrayList[1][detail.value[1]].code
					for (let key in this.util.county_list) {
						if (citycode.substring(0, 4) == key.substring(0, 4)) {
							let a = {
								title: this.util.county_list[key],
								code: key
							}
							this.arrayList[2].push(a)
						}
					}
				}

				//如果是切换区
				if (detail.column == 2) {
					this.index[2] = detail.value[2]
				}
				this.$forceUpdate()
			},
			//点击确定
			bindPickerChange() {
				let detail = this.index
				let address = {
					province: {
						title: this.arrayList[0][detail[0]].title,
						code: this.arrayList[0][detail[0]].code
					},
					city: {
						title: this.arrayList[1][detail[1]].title,
						code: this.arrayList[1][detail[1]].code
					},
					county: {
						title: this.arrayList[2][detail[2]].title,
						code: this.arrayList[2][detail[2]].code
					},
				}
				this.$refs.Compopup.close()
				this.$emit('Onaddress', address)
			},
			Onchange(e) {
				if (!e.show) {
					this.Onutil()
				}
			},
			//取消
			Oncancel() {
				this.Onutil()
				this.$refs.Compopup.close()
			},
			//打开
			Onopen() {
				this.$refs.Compopup.open()
			}
		}
	}
</script>

<style>
	.picker_bos {
		height: 600rpx;
		width: 750rpx;
		background: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.picker_bos--title {
		width: 690rpx;
		height: 80rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.title_qx {
		color: #969696;
	}

	.title_qd {
		color: #6ccbb6;
	}

	.picker_box {
		height: 520rpx;
		width: 750rpx;
	}

	.picker-view {
		height: 520rpx;
		width: 750rpx;
	}

	.picker_item {
		width: 250rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 30rpx;
		color: #323232;
	}
</style>
